<template lang="html">
  <div class="mine-song">
    <h3 class="mine-title">创建歌单 <span>(1)</span> </h3>
    <ul class="song-list" v-if="ok">
      <li>
        <img class="list-img" src="../../../../static/img/mine-index_favorite_01.png" alt="">
        <div class="song-detail">
          <p>
            <span class="song-title">我喜欢的</span>
            <span class="song-text">142首 110首已下载</span>
         </p>
         <span class="song-img"> <img src="../../../../static/img/mine-index_next.png" alt=""> </span>
        </div>
      </li>
      <li>
        <img class="list-img" src="../../../../static/img/mine-index_hot.png" alt="">
        <div class="song-detail">
          <p>
            <span class="song-title">比较热门</span>
            <span class="song-text">142首 110首已下载</span>
         </p>
         <span class="song-img"> <img src="../../../../static/img/mine-index_next.png" alt=""> </span>
        </div>
      </li>
      <li>
        <img class="list-img" src="../../../../static/img/mine-index_work.png" alt="">
        <div class="song-detail">
          <p>
            <span class="song-title">上班听歌</span>
            <span class="song-text">142首 110首已下载</span>
         </p>
         <span class="song-img"> <img src="../../../../static/img/mine-index_next.png" alt=""> </span>
        </div>
      </li>
    </ul>
    <ul class="noload" v-else >
      <li @click='add' ref='add'>
        <button type="button">+</button><span class="add">新建歌单</span>
     </li>

    </ul>

  </div>
</template>

<script>
export default {
  name:'SongList',
  data(){
    return{
      ok:false

    }
  },
  methods:{
    add(){
      
    }
  }
}
</script>

<style lang="less" scoped>
.mine-song{
  background-color: #fff;
  width: 100%;
  overflow: hidden;
}
.mine-title{
  font-size: 30/100rem;
  color: #333;
  margin: 20/100rem 39/100rem 20/100rem 20/100rem;

  span{
    font-size: 24/100rem;
    color: #666;
  }
}
.song-list{
  width: 100%;

  li{
    width:100%;
    height: 95/100rem;

    .list-img{
      width: 90/100rem;
      height: 90/100rem;
      margin-left: 20/100rem;
      float: left;
    }

    .song-detail{
      width: 635/100rem;
      float: right;
      height: 95/100rem;
      border-bottom: 1/100rem solid #ccc;
    }
    p{
      width: 200/100rem;
      float: left;
      margin-left: 10/100rem;
      span{
        display: block;
        float: left;
      }

      .song-title{
        font-size: 24/100rem;
        color: #333;
        margin-bottom: 10/100rem;
        margin-top: 10/100rem;
      }
      .song-text{
        font-size: 20/100rem;
        color:#666;
      }
    }
    .song-img{
      float: right;
      height: 100%;
      width: 15/100rem;
      margin-right: 30/100rem;
      img{
        height: 33/100rem;
        width: 17/100rem;
        margin-bottom: 40/100rem;
      }
      hr{
        height: 1/100rem;
        width: 635/100rem;
      }
    }
  }
  li:last-child div{
    border-bottom: none;
  }

}

.noload button{
  width: 90/100rem;
  height: 90/100rem;
  font-size: 50/100rem;
  line-height: 90/100rem;
  margin-left: 20/100rem;
  color:#666;
  float: left;
  border: 1/100rem solid #ccc;
}
.noload .add{
  font-size: 30/100rem;
  margin-top: 20/100rem;
  margin-left: 15/100rem;
  color: #333;
  display: inline-block;
  width: 200/100rem;
  float: left;
}
</style>
